<template>
  <div class="product" @click="xunzhong" :class="{ isNone: isShow }">
    <p>{{ pdname }}</p>
    <p>金额：{{ pdcost }}</p>
    <p>+购物车</p>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        zongjia: 0,
        isShow: false
      }
    },
    methods: {
      xunzhong () {
        if (this.isShow == true) {
          this.zongjia = parseInt(this.zongjia) - parseInt(this.pdcost);
        } else {
          this.zongjia = parseInt(this.zongjia) + parseInt(this.pdcost);
        }
        this.isShow = !this.isShow; // 点击改变样式
      }
    },
    props: [ 'pdname', 'pdcost' ] // 注册元素，使子组件能够接收到父组件数据
  }
</script>

<!-- scoped属性限定CSS作用范围 -->
<style scoped lang="scss">
.product {
  display: flex;  /* css3：flex布局 */
  flex-direction: row;  /* 排列方向：row（左右）row-reverse（右左）column（上下）column-reverse（下上） */
  justify-content: space-between;  /* flex-start（左对齐）flex-end（右对齐）center（居中）space-between（两端对齐）space-around（水平分布） */
  align-items: center;  /* flex-start（居顶）flex-end（居底）center（居中）baseline（两头顶满）stretch（内容对齐） */
  color: #333;
  border: 1px solid #333;
  padding: 0.5rem 1rem;
  -moz-border-radius: 5px;
  border-radius: 5px;
  margin: 0.5rem auto;
  &:hover {
      color: #fff;
      background: #333;
  }
}
.isNone {
  font-weight: bold;
  color: #ff5400;
  border: 1px solid #ff5400;
  &:hover {
      border: 1px solid #333;
  }
}
</style>
